<template>
    <div class="workflow-management">
      <!-- 流程类型筛选 -->
      <div class="mb-4 flex gap-4">
        <el-radio-group v-model="processType">
          <el-radio-button label="all">全部</el-radio-button>
          <el-radio-button label="purchase">采购申请</el-radio-button>
          <el-radio-button label="sale">销售订单</el-radio-button>
          <el-radio-button label="transfer">调拨申请</el-radio-button>
        </el-radio-group>
      </div>
  
      <!-- 流程列表 -->
      <el-table :data="filteredProcesses" border stripe>
        <el-table-column prop="id" label="流程编号" width="120" />
        <el-table-column prop="type" label="类型" width="120">
          <template #default="{row}">
            <el-tag :type="typeTagMap[row.type]">
              {{ typeMap[row.type] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="applicant" label="申请人" width="120" />
        <el-table-column prop="content" label="申请内容" min-width="200" />
        <el-table-column prop="status" label="状态" width="120">
          <template #default="{row}">
            <el-tag :type="statusTagMap[row.status]">
              {{ statusMap[row.status] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="申请时间" width="180" />
        <el-table-column label="操作" width="180">
          <template #default="{row}">
            <el-button 
              v-if="row.status === 'pending'"
              type="primary" 
              size="small"
              @click="handleApprove(row)"
            >
              审批
            </el-button>
            <el-button 
              v-else 
              type="info" 
              size="small"
              disabled
            >
              已处理
            </el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 审批对话框 -->
      <el-dialog v-model="approveDialogVisible" title="流程审批">
        <el-form label-width="80px">
          <el-form-item label="审批意见">
            <el-input v-model="approveForm.opinion" type="textarea" rows="4" />
          </el-form-item>
          <el-form-item label="审批结果">
            <el-radio-group v-model="approveForm.result">
              <el-radio label="approve">通过</el-radio>
              <el-radio label="reject">驳回</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="approveDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitApprove">提交</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  import { Plus } from '@element-plus/icons-vue'
  // 状态映射
  const typeMap = {
    purchase: '采购申请',
    sale: '销售订单',
    transfer: '调拨申请'
  }
  const typeTagMap = {
    purchase: 'success',
    sale: 'warning',
    transfer: 'primary'
  }
  const statusMap = {
    pending: '待审批',
    approve: '已通过',
    reject: '已驳回'
  }
  const statusTagMap = {
    pending: 'info',
    approve: 'success',
    reject: 'danger'
  }
  
  // 模拟数据
  const mockProcesses = ref([
    {
      id: 'P20240220001',
      type: 'purchase',
      applicant: '张三',
      content: '采购笔记本电脑10台',
      status: 'pending',
      createTime: '2024-02-20 10:00:00'
    }
  ])
  
  // 响应式数据
  const processType = ref('all')
  const approveDialogVisible = ref(false)
  const approveForm = ref({
    processId: '',
    opinion: '',
    result: 'approve'
  })
  
  // 计算属性
  const filteredProcesses = computed(() => {
    return mockProcesses.value.filter(p => 
      processType.value === 'all' || p.type === processType.value
    )
  })
  
  // 方法
  const handleApprove = (row) => {
    approveForm.value.processId = row.id
    approveDialogVisible.value = true
  }
  
  const submitApprove = () => {
    const process = mockProcesses.value.find(p => p.id === approveForm.value.processId)
    if (process) {
      process.status = approveForm.value.result
      approveDialogVisible.value = false
    }
  }
  </script>